<template>
    <div class="fillcontain">
        <el-form :model="searchParams" label-width="100px" class="search_container">
            <el-row>
                <el-col :span="6" class="common-box">
                    <el-form-item label="险种代码">
                        <el-select 
							clearable
							filterable 
							v-model.trim="searchParams.crtable">
                            <el-option key="" label="全部" value="">
                            </el-option>
                            <el-option v-for="item in crtableOption" :key="item.crtable" :label="item.crtable" :value="item.crtable">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="common-box">
                    <el-form-item label="产品类型">
                        <el-select v-model.trim="searchParams.prdType">
                            <el-option key="" label="全部" value="">
                            </el-option>
                            <el-option v-for="item in prdTypeOption" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="text_center">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain  icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="contain">
            <el-row class="bgfff pb15"> 
                <el-col :span="24" class="pt5">
                    <el-button type="danger" plain @click="goAdd">新增</el-button>
                </el-col>
            </el-row>
        <!-- 查询结果 -->
          <div class="table_container">
            <el-table
                 v-loading="loading"
                 :data=" relationtableData"
                 highlight-current-row
                 header-cell-class-name="table-header-class"
                 style="width:100%">
                <el-table-column
               min-width="120"
                    property="crtable"
                    label="险种代码"
                    align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                   property="die"
                   label="身故"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                   property="disability"
                   label="全残"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                   property="heavy"
                   label="重大疾病"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                   property="light"
                   label="轻症"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                   property="cancer"
                   label="防癌"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                   property="treatment"
                   label="医疗"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                   property="millionTreatment"
                   label="百万医疗"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                   property="special"
                   label="特药"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                   property="accidentDie"
                   label="意外身故"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                   property="accidentTreatment"
                   label="意外医疗"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
               min-width="120"
               fixed="right"
                   label="操作"
                   align='center'>
                    <template slot-scope="scope">
                        <!-- <el-button type="text" size="small" @click.stop="relationUpdateGo(scope.row)">修改</el-button> -->
                        <span class="operationIcon" @click.stop="relationUpdateGo(scope.row)">
                            <el-tooltip class="item" effect="light" content="修改" placement="top">
                            <i class="el-icon-edit"></i>
                            </el-tooltip>
                        </span>
                        <!-- <el-button type="text" size="small" @click.stop="deleteFather(scope.row)">删除</el-button> -->
                        <span class="operationIcon ml5"  @click.stop="deleteFather(scope.row)">
                            <el-tooltip class="item" effect="light" content="删除" placement="top">
                            <i class="el-icon-delete"></i>
                            </el-tooltip>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination
                            background
                            v-if='paginations.total > 0'
                            :page-sizes="paginations.pageSizes"
                            :page-size="paginations.pageSize"
                            :layout="paginations.layout"
                            :total="paginations.total"
                            :current-page='paginations.pageIndex'
                            @current-change='handleCurrentChange'
                            @size-change='handleSizeChange'>
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
          </div>
        </div>
        <!-- 弹框 修改-->
        <el-dialog
            title="险种代码与产品类型维护"
            :visible.sync="relationDialog"
            v-if="relationDialog"
            width="60%"
            center>
            <el-form ref="form" :model="form" :rules="rules"  label-width="120px">
                <el-row>
                    <el-col :span="12" class="common-box">
                            <el-form-item label="险种代码" prop="crtable">
                                <el-select v-model.trim="form.crtable">
                                    <el-option v-for="item in crtableOption" :key="item.crtable" :label="item.crtable" :value="item.crtable">
                                    </el-option>
                                </el-select>
                              </el-form-item>
                    </el-col>
                    <el-col :span="12" class="common-box">
                            <el-form-item label="身故" prop="">
                                <el-select v-model.trim="form.die">
                                    <el-option key="Y" label="是" value="Y">
                                    </el-option>
                                    <el-option key="N" label="否" value="N">
                                    </el-option>
                                </el-select>
                              </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="common-box">
                            <el-form-item label="全残" prop="">
                                <el-select v-model.trim="form.disability">
                                    <el-option key="Y" label="是" value="Y">
                                    </el-option>
                                    <el-option key="N" label="否" value="N">
                                    </el-option>
                                </el-select>
                              </el-form-item>
                    </el-col>
                    <el-col :span="12" class="common-box">
                            <el-form-item label="重大疾病" prop="">
                                <el-select v-model.trim="form.heavy">
                                    <el-option key="Y" label="是" value="Y">
                                    </el-option>
                                    <el-option key="N" label="否" value="N">
                                    </el-option>
                                </el-select>
                              </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="common-box">
                            <el-form-item label="轻症" prop="">
                                <el-select v-model.trim="form.light">
                                    <el-option key="Y" label="是" value="Y">
                                    </el-option>
                                    <el-option key="N" label="否" value="N">
                                    </el-option>
                                </el-select>
                              </el-form-item>
                    </el-col>
                    <el-col :span="12" class="common-box">
                            <el-form-item label="防癌" prop="">
                                <el-select v-model.trim="form.cancer">
                                    <el-option key="Y" label="是" value="Y">
                                    </el-option>
                                    <el-option key="N" label="否" value="N">
                                    </el-option>
                                </el-select>
                              </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="common-box">
                            <el-form-item label="医疗" prop="">
                                <el-select v-model.trim="form.treatment">
                                    <el-option key="Y" label="是" value="Y">
                                    </el-option>
                                    <el-option key="N" label="否" value="N">
                                    </el-option>
                                </el-select>
                              </el-form-item>
                    </el-col>
                    <el-col :span="12" class="common-box">
                            <el-form-item label="百万医疗" prop="">
                                <el-select v-model.trim="form.millionTreatment">
                                    <el-option key="Y" label="是" value="Y">
                                    </el-option>
                                    <el-option key="N" label="否" value="N">
                                    </el-option>
                                </el-select>
                              </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="common-box">
                            <el-form-item label="特药" prop="">
                                <el-select v-model.trim="form.special">
                                    <el-option key="Y" label="是" value="Y">
                                    </el-option>
                                    <el-option key="N" label="否" value="N">
                                    </el-option>
                                </el-select>
                              </el-form-item>
                    </el-col>
                    <el-col :span="12" class="common-box">
                            <el-form-item label="意外身故" prop="">
                                <el-select v-model.trim="form.accidentDie">
                                    <el-option key="Y" label="是" value="Y">
                                    </el-option>
                                    <el-option key="N" label="否" value="N">
                                    </el-option>
                                </el-select>
                              </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="common-box">
                            <el-form-item label="意外医疗" prop="">
                                <el-select v-model.trim="form.accidentTreatment">
                                    <el-option key="Y" label="是" value="Y">
                                    </el-option>
                                    <el-option key="N" label="否" value="N">
                                    </el-option>
                                </el-select>
                              </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="save" class="Defaultbutton">保 存</el-button>
                <el-button @click="relationDialog = false">返 回</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import constant from '@/utils/constant';
    import { queryListForFather,deleteFather,modify,queryCrtable} from '@/api/setting/maintain/nbCrtablePrdtypMtc.js';
    
    import { getKindInfoList} from '@/api/setting/maintain/kindUphold.js';
//  import {getSsyOrgMap} from "@/api/taskCenter/taskCommon";
    import request from '@/utils/axios';
    import appName from "@/api/appName";
    export default {
        data(){
            return {
                relationDialog:false,//默认隐藏 保额累计关系维护修改弹框
                // 查询条件
                rules:{
                    area_comp: [
                        { required: true, message: '请选择公司代码', trigger: 'blur' }
                      ],
                    areatype: [
                        { required: true, message: '请选择类型', trigger: 'blur' }
                      ]
                },
                searchParams:{
                    noteitem:''
                },
                relationtableData: [//数据
                ],
                loading:false,

                form:{
                    crtable:'',
                    die:'',
                    disability:'',
                    heavy:'',
                    light:'',
                    cancer:'',
                    treatment:'',
                    millionTreatment:'',
                    special:'',
                    accidentDie:'',
                    accidentTreatment:'',
                },

              //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
                status:"add",
                areatypeOption:[
                    {
                        label:'请选择',
                        value:''
                    },
                    {
                        label:'A',
                        value:'A'
                    },
                    {
                        label:'B',
                        value:'B'
                    }
                ],
                ssyMap:[],
                prdTypeOption:[
                    {value:"die",label:"身故"},
                    {value:"disability",label:"全残"},
                    {value:"heavy",label:"重大疾病"},
                    {value:"light",label:"轻症"},
                    {value:"cancer",label:"防癌"},
                    {value:"treatment",label:"医疗"},
                    {value:"millionTreatment",label:"百万医疗"},
                    {value:"special",label:"特药"},
                    {value:"accidentDie",label:"意外身故"},
                    {value:"accidentTreatment",label:"意外医疗"},
                ],
                crtableOption:[]
            }
        },
        created(){
//          this.getList();
            queryCrtable().then(res => this.crtableOption = res.data);
        },
        mounted(){
            // this.getList();
        },
        methods: {
            save(){
                this.$refs['form'].validate((valid) => {
                  if (valid) {
                    this.$store.dispatch('loading/CHANGE_LOADING',true)
                    if(this.status=="add"){
                        request({
                          url: appName.NB+'/maintain/nbCrtablePrdtypMtc/modify',
                          method: 'post',
                          data: this.form
                        }).then(res => {
                            this.$store.dispatch('loading/CHANGE_LOADING',false)
                            if(res.resultCode == constant.SUCCESS){
                                
                                this.relationDialog=false;
                                this.$message({
                                    message: '新增成功',
                                    type: 'success'
                                });
                                this.getList();
                            }
                           
                        }).catch(err =>{
                            this.$store.dispatch('loading/CHANGE_LOADING',false);
                        })
                    }
                    if(this.status=="update"){
                        request({
                          url: appName.NB+'/maintain/nbCrtablePrdtypMtc/modify',
                          method: 'post',
                          data: this.form
                        }).then(res => {
                            this.$store.dispatch('loading/CHANGE_LOADING',false)
                            if(res.resultCode == constant.SUCCESS){
                                this.relationDialog=false;
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.getList();
                            }
                           
                        }).catch(err =>{
                            this.$store.dispatch('loading/CHANGE_LOADING',false);
                        })
                    }
                  }
                });
                
            },
            goAdd(){
                this.relationDialog=true;
                this.status="add";
                this.form={
                    crtable:'',
                    die:'',
                    disability:'',
                    heavy:'',
                    light:'',
                    cancer:'',
                    treatment:'',
                    millionTreatment:'',
                    special:'',
                    accidentDie:'',
                    accidentTreatment:'',
                }
            },

            relationUpdateGo(row){
                this.status="update";
                this.relationDialog = true;
                this.form=row;
            },

            // 查询列表
            getList(){
                this.paginations.total=0;
                this.relationtableData=[];
                let obj={
                    die:'',
                    disability:'',
                    heavy:'',
                    light:'',
                    cancer:'',
                    treatment:'',
                    millionTreatment:'',
                    special:'',
                    accidentDie:'',
                    accidentTreatment:'',
                }
                if(this.searchParams.prdType){
                    obj[this.searchParams.prdType]='Y'
                }
                
                let para={
                    pageSize:this.paginations.pageSize,
                    pageNumber:this.paginations.pageIndex,
                    crtable:this.searchParams.crtable
                }
                Object.assign(para, obj);
                this.$store.dispatch('loading/CHANGE_LOADING',true)
                queryListForFather(para).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if(res.resultCode == constant.SUCCESS && res.data && res.data.list.length){
                        this.paginations.total = res.data.total;
                        this.relationtableData = res.data.list;
                    }
                   
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
               this.paginations.pageSize = pageSize;
               this.getList();
            },
            // 上下分页
            handleCurrentChange(page) {
               this.paginations.pageIndex = page;
               this.getList();
            },
            // 根据条件查询列表
            subGetList(){
                this.paginations.pageIndex=1;
                this.getList();
            },
            // 清除查询条件
            resetSearch(){
                this.searchParams.noteitem = '';
            },
            deleteFather(row){
                
                this.$confirm("确认删除？", '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  
                        this.$store.dispatch('loading/CHANGE_LOADING',true)
                  deleteFather(row).then(res => {
                        this.$store.dispatch('loading/CHANGE_LOADING',false)
                            if(res.resultCode == constant.SUCCESS){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                  });
                                this.getList();
                            }
                       
                        }).catch(err =>{
                            this.$store.dispatch('loading/CHANGE_LOADING',false);
                        }) 
                })
                        
            }
        },
        computed:{
            ...mapGetters(['tags']),
            reload(){
                return this.$store.state.loading.reload;
            }
        },
        activated(){
            if(this.reload){
                this.$store.dispatch('loading/CHNAGE_RELOAD',false)
                Object.assign(this.$data, this.$options.data());
            }
            document.onkeydown = (event)=>{
                  var e = event || window.event || arguments.callee.caller.arguments[0];
                  if (e && e.keyCode == 113) {
                      this.getList();
                  }
              };
        }
    }
</script>

<style lang="less" scoped>
    .fillcontain{
        padding-bottom: 0;
    }
    .contain{
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }
   .pagination{
       padding: 10px 20px;
       text-align: right;
   }
   .operationIcon{
        // padding: 12px;
        border:1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px; 
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow:0 0 3px #f9f9f9;
   }
   .search_container{
       padding: 20px 20px 0 20px;
    //    border-top: 1px solid #e1e1e1;
   }
   .common-box{
        padding-bottom: 15px;
    }
    .common-lab{
        line-height:normal!important;
        text-align: right;
        .labelName{
            text-align: right;
        }
    }
</style>



